<template>
  <div class="box-card">
    <div class="EchartPractice1">
      <div id="main1"></div>
    </div>
    <div class="EchartPractice3">
      <div id="main3"></div>
    </div>
    <div class="EchartPractice4">
      <div id="main4"></div>
    </div>
    <div class="EchartPractice2">
      <div id="main2"></div>
    </div>
  </div>
</template>

<script>
import request from "../../../views/components/utils/request.js";
export default {
  name: "EchartPractice",
  methods: {
    //单位信息统计
    drawChart1(data) {
      let myEchart1 = this.$echarts.init(document.getElementById("main1"));
      //配置项
      let option1 = {
        title: {
          text: "单位个数信息统计",
        },
        tooltip: {},
        legend: {
          data: ["单位数量"],
        },
        xAxis: {
          type: "category",
          data: [...data.map((item) => item.unitType_name)],
          axisLabel: {
            interval: 0,
            rotate: -30,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数量",
            type: "bar",
            data: [...data.map((item) => item.num)],
          },
        ],
      };
      myEchart1.setOption(option1);
    },
    //注册资金
    drawChart2() {
      let myEchart2 = this.$echarts.init(document.getElementById("main2"));
      //配置项
      let option2 = {
        title: {
          text: "注册资金",
        },
        tooltip: {},
        legend: {
          data: ["单位数量"],
        },
        xAxis: {
          type: "category",
          data: [
            "招标代理",
            "施工图审查",
            "预结算",
            "工程财务决算",
            "工程设计",
            "工程勘察",
            "工程监理",
            "工程检测单位",
            "预结算(跟踪审计)",
          ],
          axisLabel: {
            interval: 0,
            rotate: -30,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "万元",
            type: "bar",
            data: [50, 60, 45, 30, 20, 30, 50, 60, 10],
          },
        ],
      };
      myEchart2.setOption(option2);
    },
    //是否注册在高新区
    drawChart3(data) {
      let myEchart3 = this.$echarts.init(document.getElementById("main3"));
      //配置项
      let option3 = {
        title: {
          text: "是否注册在高新区",
        },
        tooltip: {},
        legend: {
          data: ["是", "否"],
        },
        xAxis: {
          type: "category",
          data: [...data.map((item) => item.unitTypeName)],
          axisLabel: {
            interval: 0,
            rotate: -30,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "是",
            type: "bar",
            data: [...data.map((item) => item.isNum)],
          },
          {
            name: "否",
            type: "bar",
            data: [...data.map((item) => item.noNum)],
          },
        ],
      };
      myEchart3.setOption(option3);
    },
    //是否税收在高新区
    drawChart4(data) {
      let myEchart4 = this.$echarts.init(document.getElementById("main4"));
      //配置项
      let option4 = {
        title: {
          text: "是否税收在高新区",
        },
        tooltip: {},
        legend: {
          data: ["是", "否"],
        },
        xAxis: {
          type: "category",
          data: [...data.map((item) => item.unitTypeName)],
          axisLabel: {
            interval: 0,
            rotate: -30,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "是",
            type: "bar",
            data: [...data.map((item) => item.isNum)],
          },
          {
            name: "否",
            type: "bar",
            data: [...data.map((item) => item.noNum)],
          },
        ],
      };
      myEchart4.setOption(option4);
    },
  },
  mounted() {
    // this.drawChart1();
    // this.drawChart2();
    // this.drawChart3();
    // this.drawChart4();
    request({
      url: "/unit/unit/count/unitCount",
    }).then((res) => {
      this.drawChart1(res.data);
    });
    request({
      url: "/unit/unit/count/unitRevenue",
    }).then((res) => {
      this.drawChart4(res.data);
    });
    request({
      url: "/unit/unit/count/unitRegister",
    }).then((res) => {
      this.drawChart3(res.data);
    });
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
#main1,
#main2,
#main3,
#main4 {
  width: 650px;
  height: 400px;
  margin-top: 20px;
  margin-left: 20px;
}
</style>

